<template>
  <!-- 标签栏 -->
  <van-tabs v-model:active="StatusActive" sticky @click-tab="TabChange">
    <van-tab v-for="(item, key) in StatusList" :title="item.title" :name="item.value" :key="key" ></van-tab>
  </van-tabs>

  <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"
      @load="load"
    >
      <!-- 商品卡片 -->
      <!-- :thumb="item.info.products.thumb_text"
        :num="item.info.pronum"
        :tag="item.info.products.flag_text" -->
      <van-card v-for="(item, key) in list" :key="key"
        :title="item.info.products.name"

      >
        <template #title >
          <div class="title" >订单号：{{ item.code }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <!-- <template #desc v-if="item.info.attrs">
          <van-tag class="tag" type="danger" v-for="(item,index) in item.info.attrs" :key="index">{{ item.value }}</van-tag>
        </template>
        <template #desc v-else>
          <van-tag class="tag" type="danger" >暂无产品规格</van-tag>
        </template> -->

        <template #tags>
          <div class="price">下单时间：{{ item.createtime_text }}</div>
        </template>

        <template #price>
          <div class="price">订单总价：￥{{ item.amount }}</div>
        </template>

        <template #footer>
          <!-- status = 1 仅退款 -->
          <van-button v-if="item.status == '1'" class="button" type="danger" size="small" @click="RefundInfo(item.id)">申请退款</van-button>

          <!-- status = 2 -->
          <van-button v-if="item.status == '2'" @click="OrderConfirm(item.id)"  class="button" type="success" size="small">确认收货</van-button>
          <van-button v-if="item.status == '2'" @click="OrderRegion(item.id)" class="button" type="warning" size="small">物流详情</van-button>
          
          <!-- status = 3 已收货 -->
          <van-button v-if="item.status == '3' || item.status == '4'"  @click="OrderComment(item.id)" class="button" type="warning" size="small">{{ item.status == '3' ? '立即评价':'查看评价' }}</van-button>

          <!-- 传一个item.id就是订单主键id -->
          <van-button class="button" type="primary" size="small" @click="OrderInfo(item.id)">订单详情</van-button>
        </template>
      </van-card>
    </van-list>
  </van-pull-refresh>

  <!-- 退款的弹框 -->
  <van-popup v-model:show="ApplyShow" position="bottom">
    <van-form @submit="OrderApplyConfirm">
      <van-field
        v-model="remark"
        name="remark"
        rows="5"
        autosize
        type="textarea"
        maxlength="120"
        placeholder="请输入申请原因"
        show-word-limit
        :rules="[{ required: true, message: '请填写申请原因' }]"
      />
      <van-button square block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交申请</van-button>
    </van-form>
  </van-popup>
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  
  //标签栏数据
  let StatusActive = ref('')
  let StatusList = ref([
    {title: '全部', value: ''},
    {title: '已支付', value: '1'},
    {title: '已发货', value: '2'},
    {title: '已收货', value: '3'},
    {title: '已完成', value: '4'},
    {title: '退货退款', value: '-1'},
  ])

  //下拉刷新的数据
  let list = ref([]) //数据列表
  let page = ref(1)  //分页
  let loading = ref(false) //加载状态
  let finished = ref(false) //是否无更多数据
  let refreshing = ref(false) //下拉刷新

  // 申请仅退款
  let orderid = ref(0)
  let ApplyShow = ref(false)
  let remark = ref('')

  // 标签栏切换
  const TabChange = async ({ name }) => 
  {
    // StatusActive.value = name
    // console.log(StatusActive.value)
    // return false
    // var params = {
    //     busid: proxy.$business.value.id,
    //     status: StatusActive.value,
    //     page: page.value,
    // }

    // var result = await proxy.$POST({
    //     url:'/order/index',
    //     params,
    // })


    refresh()
  }

  //下拉刷新
  const refresh = async () =>
  {
    //清空查询参数
    page.value = 1
    list.value = []
    finished.value = false
    loading.value = true

    load()
  }
//   
  
  //加载数据方法 查询订单数据
  const load = async () =>
  {
    //判断是否为加载中的状态
    if(refreshing.value)
    {
      refreshing.value = false
    }

    var params = {
        busid: proxy.$business.value.id,
        status: StatusActive.value,
        page: page.value,
    }

    var result = await proxy.$POST({
        url:'/order/index',
        params
    })

    // //请求发送完毕后，加载状态也就完毕了
    loading.value = false

    
    // return false

    if(result.code==0)
    {
        //如果没有更多数据了 就说明已经加载到底了....
        finished.value = true
        return false
    }

    // 修改数据attrs
    // result.data.map(item => {
    //     if(item.info && item.info.attrs)
    //     {
    //         item.info.attrs = JSON.parse(item.info.attrs)
    //     }else
    //     {
    //         item.info = {
    //             attrs: null,
    //             products:{name:''}
    //         }
    //     }
        
    // })

    // console.log(result.data)
    list.value = list.value.concat(result.data)
    // console.log(result.data)
    page.value++ 
    
  }

  
  //跳转订单详情
  const OrderInfo = (orderid) => proxy.$router.push({
    path:'/order/info', query:{orderid}
  })

  //跳转到物流详情
  const OrderRegion = (orderid) => proxy.$router.push({
    path:'/order/region', query:{orderid}
  })

  const OrderConfirm = async (orderid) => {

    // console.log(123)
    // return false
    var params = {
        orderid,
        busid: proxy.$business.value.id,
    }
    //判断是否确认收货
    proxy.$confirm({
        message:'是否确认收货'
    }).then(async () => {
        var result = await proxy.$POST({
            url:'/order/confirm',
            params,
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        refresh()

    }).catch(e => console.log('用户取消'))
  }

  //立即评价
  const OrderComment = (orderid) => proxy.$router.push({
    path:'/order/comment', query:{orderid}

  })

//   跳转申请退款
  const RefundInfo = (orderid) => proxy.$router.push({
    path:'/order/refund', query:{orderid}
  })


</script>


<style scoped>
  @import url('/assets/css/OrderIndex.css');
</style>
  